<template>
    <el-table :data="paginatedParking" style="width: 100%">
        <el-table-column prop="plateNo" label="车牌号" width="150"/>
        <el-table-column prop="parkingLot" label="停车场" width="150"/>
        <el-table-column prop="enterTime" label="驶入时间" width="150"/>
        <el-table-column prop="exitTime" label="驶出时间" width="150"/>
        <el-table-column prop="duration" label="停车时长" width="150"/>
    </el-table>
    <div class="pagination">
        <el-pagination
            v-if="vehicleParking.length > pageSize"
            style="margin-top: 16px; text-align: right;"
            background
            layout="prev, pager, next, jumper, total"
            :total="vehicleParking.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
        />
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, computed, watch } from 'vue';

const vehicleParking = ref([]);

const props = defineProps(['idNumber']);

watch(() => props.idNumber, (newId) => {
    vehicleParking.value.length = 0;
    axios.post("/api/parkingInfo/findByIdNumber", {
        idNumber: newId
    })
    .then(response => {
        const res = response.data.data || [];
        res.forEach(element => {
            vehicleParking.value.push(element);
        });
    })
    .catch(error => {
        console.error("Error fetching parking information:", error);
    });
});

const currentPage = ref(1);
const pageSize = 10;

const paginatedParking = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    return vehicleParking.value.slice(start, start + pageSize);
});
</script>

<style>
.pagination {
    display: flex;
    justify-content: center;
    padding: 10px;
}
</style>